:host {
  display: block;
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

// 搜索区域样式
.search-area {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);

  .search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;

    .form-item {
      display: flex;
      align-items: center;
      
      span {
        min-width: 70px;
        margin-right: 8px;
        color: #606266;
        font-size: 14px;
      }

      input, select {
        width: 220px;
        height: 36px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        padding: 0 12px;
        font-size: 14px;
        color: #606266;
        transition: all 0.3s;
        
        &:focus {
          border-color: #409eff;
          outline: none;
          box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
        }

        &::placeholder {
          color: #c0c4cc;
        }
      }

      select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23606266'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 8px center;
        background-size: 16px;
        padding-right: 32px;
      }
    }

    .form-buttons {
      display: flex;
      gap: 12px;
      margin-left: auto;

      button {
        height: 36px;
        padding: 0 20px;
        border-radius: 4px;
        border: none;
        cursor: pointer;
        font-size: 14px;
        transition: all 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        
        &.btn-reset {
          background: #fff;
          border: 1px solid #dcdfe6;
          color: #606266;
          &:hover {
            color: #409eff;
            border-color: #409eff;
            background-color: #ecf5ff;
          }
        }

        &.btn-search {
          background: #409eff;
          color: #fff;
          &:hover {
            background: #66b1ff;
          }
        }

        &.btn-advanced {
          background: #fff;
          border: 1px solid #dcdfe6;
          color: #606266;
          &:hover {
            color: #409eff;
            border-color: #409eff;
            background-color: #ecf5ff;
          }
        }
      }
    }
  }
}

// 操作按钮区域样式
.operation-area {
  margin-bottom: 16px;
  display: flex;
  gap: 12px;
  padding: 16px 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);

  button {
    height: 36px;
    padding: 0 20px;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #606266;

    &:hover {
      color: #409eff;
      border-color: #409eff;
      background-color: #ecf5ff;
    }

    &.btn-add {
      background: #409eff;
      color: #fff;
      border: none;
      &:hover {
        background: #66b1ff;
      }
    }

    &.btn-delete {
      color: #f56c6c;
      border-color: #fbc4c4;
      &:hover {
        color: #fff;
        background-color: #f56c6c;
        border-color: #f56c6c;
      }
    }

    &.btn-enable {
      color: #67c23a;
      border-color: #c2e7b0;
      &:hover {
        color: #fff;
        background-color: #67c23a;
        border-color: #67c23a;
      }
    }

    &.btn-disable {
      color: #e6a23c;
      border-color: #f5dab1;
      &:hover {
        color: #fff;
        background-color: #e6a23c;
        border-color: #e6a23c;
      }
    }

    &.btn-lock {
      color: #909399;
      border-color: #d3d4d6;
      &:hover {
        color: #fff;
        background-color: #909399;
        border-color: #909399;
      }
    }
  }
}

// 表格样式
.table-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  overflow: hidden;

  table {
    width: 100%;
    border-collapse: collapse;

    th, td {
      padding: 16px;
      text-align: left;
      font-size: 14px;
      border-bottom: 1px solid #ebeef5;
    }

    th {
      background: #fafafa;
      color: #606266;
      font-weight: 500;
      white-space: nowrap;
    }

    td {
      color: #606266;
    }

    tbody tr {
      transition: all 0.3s;
      
      &:hover {
        background: #f5f7fa;
      }
    }

    .btn-edit, .btn-delete {
      padding: 4px 8px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 13px;
      margin-right: 8px;
      transition: all 0.3s;
      text-decoration: none;
      display: inline-block;
    }

    .btn-edit {
      color: #409eff;
      background-color: #ecf5ff;
      &:hover {
        background-color: #409eff;
        color: #fff;
      }
    }

    .btn-delete {
      color: #f56c6c;
      background-color: #fef0f0;
      &:hover {
        background-color: #f56c6c;
        color: #fff;
      }
    }
  }
}

// 分页区域样式
.pagination {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  font-size: 14px;
  color: #606266;

  .page-numbers {
    display: flex;
    gap: 4px;
    align-items: center;

    a {
      min-width: 32px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s;
      color: #606266;
      
      &:hover {
        color: #409eff;
        border-color: #409eff;
      }

      &.active {
        background-color: #409eff;
        border-color: #409eff;
        color: #fff;
      }
    }
  }

  .page-size {
    select {
      height: 32px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      padding: 0 8px;
      font-size: 14px;
      color: #606266;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23606266'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 8px center;
      background-size: 16px;
      padding-right: 28px;
      cursor: pointer;
      transition: all 0.3s;
      
      &:focus {
        border-color: #409eff;
        outline: none;
      }

      &:hover {
        border-color: #409eff;
      }
    }
  }
}

.btn-view {
  padding: 4px 8px;
  margin: 0 4px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background-color 0.3s;

  &:hover {
    background-color: #40a9ff;
  }

  i {
    margin-right: 4px;
  }
} 